<template>
  <!-- 通过判断level是否等于commentIds的长度来判断是否为楼层的顶部，如果是则实行else，不是的就接着递归 -->

  <div class="comment-box clearfix" v-if="level !== commentIds.split(',').length">
    <div class="comment-info clearfix">
        <div class="com_ava lf">
          <img src="../assets/cat.jpg" class="commenter_avatar">
            <!-- <img v-bind:src="commentItem[commentId].user.avatar ? `https://dev.apis.sh/PBX40wgC0/static/${commentItem[commentId].user.avatar}` : avatar" alt="" class="commenter_avatar"> -->
        </div>
        <div class="com_msg lf">
            <span class="user">{{commentItem[commentId].user.nickname}}</span>
            <span class="time">{{formattime(commentItem[commentId].create_time)}}</span>
            <span class="floor-count gt">{{commentItem[commentId].buildLevel}}楼</span>
        </div>
        <div class="com_content clearfix lf">        
          <p class="content lf">
            <span class="content_left">{{commentItem[commentId].content}}</span>
          </p>
          <div class="thumbs_up gt">
            <span class="against">
                <img src="../assets/icon_thumb_down.png">
                <span class="badhand">{{commentItem[commentId].against}}</span>
            </span>
            <span class="vote">
                <img src="../assets/icon_thumb_up.png">
                <span class="goodhand">{{commentItem[commentId].vote}}</span>
            </span>
            <span class="reply">
              <img src="../assets/icon_comment.png">
            </span>
          </div>
        </div>
    </div> 
    <!-- 此时如果level === 1说明没有更多的楼层，递归结束,否则level-1，接着递归 -->

    <box v-if="level !== 1" v-bind:commentItem="commentItem" v-bind:commentIds="commentIds" :level="level - 1"/>

  </div>
  <!-- 如果是楼层顶部则应用单独的样式 -->

  <div v-else class="comment-item">
    <!-- <img :src="commentItem[commentId].user.avatar ? `http://192.168.1.99:8765/PBumsXFDc/static/${commentItem[commentId].user.avatar}` : avatar" alt=""> -->
    <div class="inner-box">
      
      <!-- 顶楼盖完后递归下一层楼,如果楼层只有一层则递归结束，否则level-1接着递归 -->

      <box v-if="level !== 1" v-bind:commentItem="commentItem" v-bind:commentIds="commentIds" :level="level - 1"/>

    </div>
  </div>
</template>

<script>
  // 引入默认头像
//   import avatar from '../assets/logo.png'
import moment from "moment";
  export default {
    // 通过name实现递归调用
    name: 'box',
    // 通过props来接收父组件传递过来的参数，名字与父组件中一致，接收到的参数可像data中的变量一样使用
    props: ['commentItem', 'commentIds', 'level'],
    computed: {
      commentId: function () {
        var vm = this
        // 通过split方法把id字符串切割成对应的数组，然后通过level来取到对应的楼层
        return vm.commentIds.split(',')[vm.level - 1]

      },
      // 通过计算属性返回可在模板中使用的变量
      avatar: function () {
        return avatar
      }
    },
    methods:{
         formattime(time) {
            return moment(time).format("YYYY-MM-DD HH:mm:ss");
        },
    }
  }
</script>

<style scoped>
.comment-box {
  margin-top: 30px;
  padding: 26px 16px 10px 9px;
  border: 1px solid #adadad;
  background: #f3f3f3;
}
.comment-box .commenter_avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  vertical-align: middle;
}
.comment-item > img {
  float: left;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 12px;
}
.comment-info span,
.inner-box span {
  font-size: 12px;
}
.time {
  margin-left: 24px;
}
.floor-count {
  float: right;
}
.content {
  display: inline-block;
  margin: 10px 0;
  width: 50%;
}
.thumbs_up {
  margin-top: 10px;
  font-size: 14px;
  color: #6f6f6f;
}
.thumbs_up img {
  width: 25px;
  height: 25px;
  cursor: pointer;
}
.thumbs_up span {
  margin-left: 22px;
}
.thumbs_up .goodhand,
.thumbs_up .badhand {
  color: #6f6f6f;
  margin-left: 6px;
}
.com_ava {
  margin-right: 12px;
}
.com_msg,
.com_content {
  width: 88%;
}
.com_header {
  margin-left: 0;
  width: 98%;
}
.com_title {
  width: 94%;
}
.com_header .replyBox,.comment-info .replyBox{
  display: block;
  width:90%;
  height:114px;
  background: #FCFCFC;
  border: 1px solid #979797;
  margin: 13.5px auto 0;
  resize:none;
  padding:20px 17px;
  font-size: 14px;
  color: #9B9B9B;
}
.replyBtn .rep{
  margin-top: 15px;
  width:110px;
  height:36px;
  line-height: 36px;
  text-align: center;
  background: #FF8000;
  font-size: 16px;
  color: #FFFFFF;
  border:none;
}

</style>